<template>
    <fieldset>
        <legend>App</legend>
        <div class="box">
            <div class="pic"><img src="./未标题-1.jpg" alt=""></div>
            <div class="words">~ 开始努力写代码了 ~</div>
            <div class="smallbox">
                <input type="text" placeholder="添加要做的事儿..." v-model="msg">
                <div @click="submits"><img src="./未标题-2.jpg" alt="" class="pics"></div>
            </div>
            <ul>
                <li v-for="(item, value) in arr" :key="item.id" :class="{actions:item.judgment}"><input type="checkbox" v-model="checkedss" :value="item.id" @change="checkeds(item,$event)"> {{ item.content }} <div @click="del(value)">X</div>
                </li>
            </ul>
            <div class="bottoms">
                <div>全部</div>
                <div>{{ aaa }}条事项</div>
                <div>已完成:{{bbb}}</div>
                <div>未完成:{{ccc}}</div>
            </div>
        </div>
    </fieldset>
</template>
<script setup>
import { onMounted, ref ,computed} from "vue"
let msg = ref('')
let arr = ref([])
let aaa = ref(0)
let checked = ref()
let checkedss = ref([])
let bbb = ref(0)
let checkeds =function(item,e){
    item.judgment=e.target.checked
    console.log(item.judgment);
    bbb.value=checkedss.value.length
    // console.log(arr.value.length,bbb.value.length);
}
let ccc = computed(()=>{
    return arr.value.length-bbb.value
})
//添加事件
let submits = function () {
    //判断v-model传入的值是否为空
    if(msg.value){
        let obj = {
            id:Math.random(),
            content:msg.value,
            judgment:false
        }
        // console.log(obj.id);
        arr.value.unshift(obj)
        msg.value = ''
    aaa.value = arr.value.length
    //存储到本地
    localStorage.setItem('bbb',JSON.stringify(arr.value))
    // console.log(checkedss.value.length);
    }else{
        alert('请输入您要做的事')
    }
}
//删除事件
let del = function (a) {
    //通过传入的value，来进行删除
    let b = arr.value.splice(a, 1)
    // console.log(b[0].id,checkedss.value);
    aaa.value = arr.value.length
    checkedss.value=checkedss.value.filter(item => item !== b[0].id)
    bbb.value=checkedss.value.length
    // console.log(checkedss.value.length);
    localStorage.setItem('bbb',JSON.stringify(arr.value))
    // console.log(arr.value.length,bbb.value,checkedss.value);

}
// 永久存储
onMounted(()=>{
    //将本地存储的值拿出来
    
    let a = localStorage.getItem('bbb')
    // 判断本地存储有没有
    if(a){
        arr.value = JSON.parse(a)
        console.log(1);
        aaa.value = arr.value.length
    }
})

</script>
<style scoped>
* {
    margin: 0;
    padding: 0;
    list-style: none;
}
.actions{
    background-color: hotpink;
}
fieldset {
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, 50%);
    width: 600px;
    /* height: 400px; */
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 10px;
}

.box {
    width: 550px;
    /* height: 350px; */
    background-color: #f2f2f2;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.words {
    color: rgb(7, 190, 246);
    font-size: 25px;
    font-weight: 900;
    margin: 40px 0 30px 0;
}

.pic {
    margin-top: 30px;
}

.smallbox {
    display: flex;
}

.smallbox input {
    margin-right: 30px;
    width: 300px;
    height: 30px;
    font-size: 26px;
    border: 0;
    background-color: #f2f2f2;
    outline: none;
    border-bottom: 3px dashed rgb(7, 190, 246);
    margin-bottom: 30px;
}

.pics {
    width: 50px;
    height: 30px;
}

.smallbox div {
    cursor: pointer;
}

li {
    width: 384px;
    margin: 20px 0;
}

.bottoms {
    display: flex;
}

.bottoms div {
    margin: 10px;
}

.bottoms div:nth-child(1) {
    border: 1px solid rgb(7, 190, 246);
    padding-left: 5px;
    padding-right: 5px;
}

.bottoms div:nth-child(3) {
    border: 1px solid rgb(7, 190, 246);
    padding-left: 5px;
    padding-right: 5px;
}

.bottoms div:nth-child(4) {
    border: 1px solid rgb(7, 190, 246);
    padding-left: 5px;
    padding-right: 5px;
}

li div {
    font-weight: 900;
    float: right;
    cursor: pointer;
}
</style>